<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缴纳保证金</title>
    <link rel="stylesheet" href="../../css/common/base.css">
    <link rel="stylesheet" href="../../css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/wj/baozhengjin-E2.css">
    <link rel="stylesheet" href="../../css/wj/jierenwu-E1.css">
    <link rel="stylesheet" href="../../css/wj/zhifu.css">
    <script src="../../js/flexible.js"></script>
</head>
<body>
    <header></header>
    <div class="kong"></div>
    <section>
        <ul id="id1">
            <li>
                <div class="qujian_top">
                    <div class="qt_left">
                        <img src="../../img/组 67.png" alt="">
                        <span>担保</span>
                    </div>
                    <div class="qt_middle">
                        <span>
                            <span>代取件</span>
                            <span>酬金3.00元</span>
                        </span>
                        <span>请在规定时间内将物品送至指定地点</span>
                    </div>
                    <span id="lingqurenwu">领取任务</span>
                </div>
                <div class="qujian_bottom">
                    <span>明日18:00前</span>
                    <span>送至</span>
                    <span>A宿舍306</span>
                </div>
            </li>
            <span>更多任务</span>
            <li>
                <div class="qujian_top">
                    <div class="qt_left noword">
                        <img src="../../img/组 67.png" alt="">
                        <!-- <span>担保</span> -->
                    </div>
                    <div class="qt_middle">
                        <span>
                            <span>代取件</span>
                            <span>酬金3.00元</span>
                        </span>
                        <span>请在规定时间内将物品送至指定地点</span>
                    </div>
                    <span id="lingqurenwu">领取任务</span>
                </div>
                <div class="qujian_bottom">
                    <span>今日18:00前</span>
                    <span>送至</span>
                    <span>A宿舍306</span>
                </div>
            </li>
        </ul>
        <div class="zhezhaoceng" id="id2"></div>
        <div class="tanchuang" id="id3" style="display: none;">
            <div>
                <img src="../../img/组 88.png" alt="">
                <span>此交易需缴纳保证金，若未如期完成，平台将扣除保证金</span>
            </div>
            <div>
                <span id="give_up">放弃任务</span>
                <span id="jiaoqian">缴纳保证金</span>
            </div>
        </div>
    </section>
    <!-- ---------------------------以下是支付页面新增的部分，合并在这里写------------------------------ -->
    <div class="zhifu" id="id4" style="display: none;">
        <div>
            <div>
                <img src="../../img/微信.png" alt="" height="33" width="33" >
                <span>微信支付</span>
            </div>
            <img src="../../img/勾选.png" alt="" height="14.5" width="14.5">
        </div>
        <div>
            <div>
                <img src="../../img/支付宝.png" alt="" height="33" width="33" >
                <span>支付宝</span>
            </div>
            <img src="../../img/椭圆 40.png" alt="" height="14.5" width="14.5">
        </div>
    </div>
</body>
<script>
// 先获取到变量，也就是获取到事件关联的目标，有几个就几个var
    var  lingqurenwu = document.getElementById("lingqurenwu")
    var id2 = document.getElementById("id2")
    var id3 = document.getElementById("id3")
// 给点击的目标添加点击后的功能
    lingqurenwu.addEventListener("click", function(){
        id2.style.display = "flex"
        id3.style.display = "flex"
    })
// 因为遮罩层挡住了不能点，所以在新的点击事件
    var  give_up = document.getElementById("give_up")
    give_up.addEventListener("click",function(){
        id2.style.display = "none"
        id3.style.display = "none"
    })
    // ------------------------新增的支付的点击事件----------------------------------
    var jiaoqian = document.getElementById("jiaoqian")
        jiaoqian.addEventListener("click",function(){
            // id4.style.display = "flex"
            id2.style.display = "flex"
            id3.style.display = "none"
            id4.style.display = "flex"
        }
        )
    var  id2 = document.getElementById("id2")
        id2.addEventListener("click",function(){
        id2.style.display = "none"
        id3.style.display = "none"
        id4.style.display = "none"
    })
</script>
</html>